<template>

  <el-dialog
    v-model="dialogVisible"
    title="题库添加"
    width="44%"
    top="5vh"
    :before-close="handleClose"
  >
    <div class="addBase">
      <el-form :inline="true" ref="formRef" :model="params" class="demo-form-inline" >
        <el-form-item
          label="题库名称"
          prop="title"
          :rules="[{ required: true, message: '请输入题库名称' }]"
        >
          <el-input v-model="params.title" placeholder="请输入题库名称" />
        </el-form-item>
        <el-form-item label="被他人使用">
          <el-radio-group v-model="params.isshow" class="ml-4">
            <el-radio label="1" size="large">允许所有老师使用</el-radio>
            <el-radio label="2" size="large">不允许任何老师使用</el-radio>
             <el-badge :value="params.limits.length" type="primary" style="margin-top:11px" class="ding" v-if="params.limits.length>0">
             </el-badge>
             <el-radio label="3" size="large" @change="ke">允许部分老师使用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false,emits('addBases',false)">取消</el-button>
        <el-button type="primary" @click="AddBase(formRef)"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
    <!-- 引入可见老师组件 -->
    <Student :is="is" @iss="iss" :stu="stu" @stus="stus"></Student>
</template>
<script lang="ts" setup>
import { inject, provide, reactive, toRefs, watch } from "vue";
// 引入可见老师封装
import Student  from "../../components/test/student.vue";
// 引入添加题库
import {Databasequestion} from '../../apis/test/test'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
const data = reactive({
  dialogVisible: false,
  is:false,
  stu:'',
  val:0,
  params:{
      id: 0,
      // 题库名称
      title: "",
      // 单选框
      isshow: '1',
      limits:[]
  },
  formRef:null
});
const { formRef,dialogVisible ,is,stu,params,val}:any = toRefs(data);
const props: any = defineProps({
  Addis: {
    type: Boolean,
  },
});
// watch监听
watch([props], () => {
  dialogVisible.value = props.Addis;
});
// 子传父
const emits = defineEmits(['addBases'])
// 关闭触发事件
const handleClose = (done: () => void) => {
  done();
  emits('addBases',false)
};
// 子传父
const iss = (e:any)=>{
    is.value=e
}
// 可见老师
const ke=()=>{
    is.value=true
    stu.value='可见'
}
const stus=(e:any)=>{
  e.map((item:any)=>(
   params.value.limits.push({'id':item})
  ))
}
// 题库添加
const DataAdd=async ()=>{
  const res:any =await Databasequestion(params.value)
  if(res.errCode==10000){
    ElMessage.success('添加成功')
    dialogVisible.value = false
    emits('addBases',false)
  }else{
    ElMessage.error(res.errMsg)
  }
}
// 点击确定
const AddBase=(formEl: FormInstance | undefined)=>{
    
    if (!formEl) return
  formEl.validate((valid:any) => {
    if (valid) {
      DataAdd()
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>
<style scoped lang="less">
.dialog-footer button:first-child {
  margin-right: 10px;
}
@import url("../../static/css/test/AddBase.css");
</style>